<template>
  <el-table
      class="main-table"
      :data="tableData"
      style="width: 100%"
      size="small"
      header-row-class-name="table-header"
      header-cell-class-name="table-header-cell"
      row-class-name="table-row"
      row-key="id"
      :style="{...magnifyFontSizeObj}"
  >
    <el-table-column
        v-for="(colItem, colIndex) of columnData"
        :key="colItem.id"
        :type="colItem.type"
        :prop="colItem.key"
        :label="colItem.label"
        :width="colItem.width"
        align="center"
        show-overflow-tooltip
    >
    </el-table-column>
  </el-table>
</template>

<script setup>
import {defineExpose, defineProps, onMounted, onUnmounted, ref} from "vue";
import {pxToRem} from "@/utils/index";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columnData: {
    type: Array,
    default: () => []
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

const magnifyFontSizeObj = ref({
  '--custom-font-size-30': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 30 : 50) + 'px',
  '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
})

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-30': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 30 : 50) + 'px',
    '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
  }
}

const updateChart = () => {
  changeFontSize();
};

onMounted(() => {
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h250 {
  height: 250px;
}
.dialog-h250 {
  height: 490px;
}

.main-table {
  background-color: transparent;
  /deep/ .table-header {
    background: linear-gradient( 60deg, #0E5FFF 0%, #00FFFF 100%);
    .table-header-cell {
      background-color: transparent;
      color: white;
      border-bottom: 0;
    }
  }
  /deep/ .table-row {
    background: transparent;
    height: var(--custom-font-size-30) !important;
    .el-table__cell {
      border-bottom: 0;
      padding-bottom: 0;
      color: white;
      font-size: var(--custom-font-size-12);
      padding-top: 0;
      .cell {
        line-height: var(--custom-font-size-30);
      }
    }
  }
  /deep/ .table-row:hover {
    .el-table__cell {
      background: transparent;
    }
  }
  /deep/ .el-table__inner-wrapper:before {
    height: 0;
  }
  /deep/ .el-popper {
    span {
      font-size: var(--custom-font-size-12);
    }
  }
}
/deep/ .el-popper__arrow:before {
  background: #1C5BCC !important;
}
</style>